<template>
    <div class="page__all" ref="scrollRef" @scroll="handScrollFunc">
        
        <div class="app__list">

            <div class="app__card" v-for="row, index in data_list">
                <AppCard
                @click="open_app(row)"
                :instance="row"
                ></AppCard>
            </div>
            
            <div v-if="!ableLoadMore" class="scroll__botton">已经加载全部~</div>
        </div>

        <AppDialog
        @cancel="cancel"
        :visible="isVisible"
        :instance="click_app_instance"
        ></AppDialog>
    </div>
</template>
           
<script setup>
    import { ref, onMounted } from "vue"

    import AppCard from './app/AppCard.vue'
    import AppDialog from './app/AppDialog.vue'

    import { getAppList } from '@/api/homeApi.js'

    const currentPage = ref(1)
    const pageSize = ref(30)
    const total = ref(0)

    const isVisible = ref(false)
    const click_app_instance = ref({})

    const ableLoadMore = ref(true)
    const scrollRef = ref(null)
    const loading = ref(false)
    
    
    const data_list = ref([])

    const handScrollFunc = ()=>{
      if (ableLoadMore.value && scrollRef.value.scrollHeight - (scrollRef.value.scrollTop + scrollRef.value.clientHeight) <= 10){
          loadMore()
      }
    }

    // 获取数据
    const getDataList = async () => {

      var req_data = {
        page: currentPage.value,
        page_size: pageSize.value
      }
      var res = await getAppList(req_data)
      var res_data = res.data
    //   console.log(res)
      data_list.value = [...data_list.value, ...res_data.list]
      total.value = res_data.total
      if(total.value <= data_list.value.length){
        ableLoadMore.value = false
      }

    }


    function loadMore(){
        console.log('loadMore')
        
        
        try{
           setTimeout(()=>{
            if (loading.value) return
            loading.value = true
            
            currentPage.value += 1
            getDataList()
            // data_list.value = [...data_list.value, ...li]
            
           }, 100)
        } catch(error) {
            console.log(error)
        } finally{
            loading.value = false
        }
    }

    
    function cancel(){
        isVisible.value = false
    }

    function open_app(item){

        click_app_instance.value = item
        // console.log(item)
        isVisible.value = true
    }

    
    // 改变页码
    function handleCurrentChange(newPage){
      // console.log(newPage)
      currentPage.value = newPage
    }


    onMounted(()=>{
        getDataList()
    })
    
</script>
<style scoped lang="scss">
    .page__all{
         width: 100%;
        height: 100%;
        overflow-y: scroll;
    }
    .app__list{
        // width: 100%;
        // height: 100%;
        
        display: flex;
        flex-wrap: wrap;
        gap: 10px; /* 图片之间的间距 */
        padding: 20px;

        .app__card{
            // border: 1px solid red;
            // flex: 1 1 calc(16.66% - 10px); /* 每个图片项占据大约三分之一宽度，减去间距 */
            box-sizing: border-box; /* 确保padding和border不超出宽度 */
            // max-width: calc(16.66% - 10px);
            // min-width: 220px;
            // border-radius: 15px;
            
        }

        .scroll__botton{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    @media (max-width: 3000px) {
        .app__card {
            flex: 1 1 calc(16.66% - 10px);
            max-width: calc(16.66% - 10px);
        }
    }
    
    @media (max-width: 1600px) {
        .app__card {
            flex: 1 1 calc(20% - 10px);
            max-width: calc(20% - 10px);
        }
    }
    @media (max-width: 1200px) {
        .app__card {
            flex: 1 1 calc(25% - 10px);
            max-width: calc(25% - 10px);
        }
    }
</style>